<template>
  <div class="flex flex-col flex-1
        rounded-2xl overflow-clip shadow-2xl  focus:outline-0
        bg-primary/20
        relative
        "
  >
    <div class="card card-compact bg-base-100 shadow-xl">
      <figure><img src="../assets/cover.png" alt=""></figure>
      <div class="card-body">
        <div class="card-title text-sm break-words break-all truncate w-full h-full">{{ props.song['name'] }}</div>
        <p>
          {{
            props.song['remark'] != null ? props.song['remark'].length >= 28 ? props.song['remark'].substring(0, 28) + "..." : props.song['remark'] : "无介绍"
          }}
        </p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary" @click="toSongEdit()">上传歌词</button>
        </div>
      </div>
    </div>

    <div class="bg-green w-full h-2/5 ">
      <p :class="'text-xs md:text-md block font-bold text-center'">

      </p>
      <p :class="'text-xs md:mt-2 text-center break-words break-all'">

      </p>
    </div>
    <label :for="'my-modal' + props.song['id']"
           @click.stop="removeSong(false)"
           class="absolute top-1 right-1 hover:text-error ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24  24" stroke-width="1.5" stroke="currentColor"
           class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </label>

    <!--添加到我喜欢-->
    <label @click.stop="addSongToFavorite()"
           class="absolute top-1 left-1 hover:text-error ">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           :class="[{'fill-pink-400': isFavorite } ,'w-6 h-6']">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
      </svg>
    </label>
  </div>

  <!-- Put this part before </body> tag -->
  <input type="checkbox" :id="'my-modal' + props.song['id']" class="modal-toggle"/>
  <label :for="'my-modal' + props.song['id']" class="modal cursor-pointer">
    <label class="modal-box relative " for="">
      <h3 class="font-bold text-lg">提示</h3>
      <p class="py-4 break-words break-all">此操作将会永久删除 “{{ props.song['name'] }}” ，不可逆，确定？</p>
      <div class="modal-action">
        <label :for="'my-modal' + props.song['id']" class="btn btn-accent">取消</label>
        <label @click="removeSong(true)"
               class="btn btn-error">删除</label>
      </div>
    </label>
  </label>
</template>
<script setup lang="ts">

import {hook_deleteSong} from "../hook/SongHook.ts";
import {hook_addSongToPlayerList} from "../hook/SongPlayerHook.ts";
import "vue-router/dist/vue-router";
import {inject, onBeforeMount, onMounted, ref} from "vue";
import router from "../plugins/router.ts";
import {
  hook_addSongToFavorite,
  hook_checkSongIsFavorite,
  hook_deleteFavoriteSongByUserId
} from "../hook/FavoriteHook.ts";
import {hook_getFavorite, hook_getUser} from "../hook/UserHook.ts";

const props = defineProps<{
  song: null;
}>();

let isFavorite = ref()
onMounted(async () => {
  isFavorite.value = await hook_checkSongIsFavorite(hook_getFavorite()['id'], props.song['id'])
})

function removeSong(b) {
  if (b) {
    //1.在url中提取文件名
    let fileName = props.song['url'].substring(props.song['url'].lastIndexOf("/") + 1);
    console.log(fileName)
    console.log(props.song)
    hook_deleteSong(props.song['id'], fileName);
    location.reload()
  } else {
    return false
  }
}


function toSongEdit() {
  router.push('/updateLyric/' + props.song['id'])
}

async function addSongToFavorite() {
  if (isFavorite.value) {
    await hook_deleteFavoriteSongByUserId(hook_getUser().id, props.song['id'])
  } else {
    await hook_addSongToFavorite(props.song['id'])
  }
  isFavorite.value = await hook_checkSongIsFavorite(hook_getFavorite()['id'], props.song['id'])
}




</script>

<style scoped>

</style>